<template>
  <div class="box">
    <span class="layui-badge-dot"></span>
    <span v-for="color in colors" :key="color" :class="['layui-badge-dot', `bg-${color}`]"></span>
    <fieldset class="title">
      <legend>已发布任务</legend>
      <el-row :gutter="24" class="main-row" style="margin: 20px 80px">
        <el-col :span="16" class="left-col">
          <el-row>
            <el-col :span="8" class="input-col">
              <el-autocomplete
                  class="inline-input"
                  v-model="school"
                  :fetch-suggestions="querySearch"
                  placeholder="输入选择"
                  @select="handleSelect"
                  :popper-append-to-body="false"
              >
                <template #prepend>学校</template>
              </el-autocomplete>
            </el-col>
            <el-col :span="8" class="input-col">
              <span
                  style="color: #000;font-size: 14px;width: 55%;
                  text-align: center;line-height: 33px;border: 1px solid #DCDFE6;"
              >任务状态</span>
              <el-select
                  v-model="select"
                  placeholder="请选择任务状态"
                  class="custom-select"
              >
                <el-option label="请选择" value="1"></el-option>
                <el-option label="待解决" value="2"></el-option>
                <el-option label="已关闭" value="3"></el-option>
                <el-option label="解决中" value="4"></el-option>
                <el-option label="已完成" value="5"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8" class="input-col">
              <div class="price-range">
                <el-input class="price-input" placeholder="￥" v-model="price1">
                  <template #prepend>价格范围</template>
                </el-input>
                <span class="range-separator">-</span>
                <el-input class="price-input secondary" placeholder="￥" v-model="price2"/>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="right-col">
          <div class="search-area">
            <el-input class="search-input" v-model="search">
              <template #prepend>关键词</template>
            </el-input>
            <el-button class="search-button">搜索</el-button>
          </div>
        </el-col>
      </el-row>
      <fieldset class="list">
        <legend>已发布任务</legend>
        <el-button type="text" style="margin:0 -30px;padding: 12px;color: #000">任务</el-button>
        <div style="float: right;color: #000!important">
          <el-button type="text">时间最新</el-button>
          <el-button type="text">
            <i class="el-icon el-icon-arrow-up" style="margin-left: 4px;"></i>
            价格升序</el-button>
          <el-button type="text">
            <i class="el-icon el-icon-arrow-down" style="margin-left: 4px;"></i>
            价格降序</el-button>
        </div>
        <div class="card">
          <div class="tag">
            <el-tag
                v-for="item in items"
                :key="item.label"
                :type="item.type"
                effect="dark" style="margin: 0 2px;padding: 0 5px">
              {{ item.label }}
            </el-tag>
            <fieldset style="margin: 10px">
              <legend>清除杂草任务</legend>
              <div class="content">
                <span>详细描述</span>
                <span>发布时间:2024-12-18 08:52:52</span>
                <span>发布时间:2024-12-18 08:52:52</span>
                <span>奖励:5</span>
                <h3>清理校园北门杂草任务</h3>
                <el-row>
                  <el-button size="small" round>取消该任务</el-button>
                  <el-button size="small" round disabled>任务已关闭</el-button>
                  <el-button size="small" round @click="dialogTableVisible = true">查看接受者信息</el-button>
                  <el-button size="small" round>确认任务完成</el-button>
                </el-row>
              </div>
            </fieldset>
          </div>
        </div>
      </fieldset>
    </fieldset>

    <el-dialog title="该用户信息" :visible.sync="dialogTableVisible">
      <span class="layui-badge-dot"></span>
      <span v-for="color in colors" :key="color" :class="['layui-badge-dot', `bg-${color}`]"></span>
      <fieldset>
        <legend>该用户信息</legend>
        <fieldset class="message">
          <legend>信息</legend>
          <el-descriptions class="margin-top" title="" :column="1" :size="size" border>
            <el-descriptions-item>
              <template slot="label">
                用户学号
              </template>
              1
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                所在学校
              </template>
              南昌大学
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                用户姓名
              </template>
              小明
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                学校编号
              </template>
              23
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                注册时间
              </template>
              2024-12-18 18:49:51
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                用户状态
              </template>
              正常
            </el-descriptions-item>
          </el-descriptions>

        </fieldset>
      </fieldset>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserHaveTask",
  data() {
    return {
      select: '1',
      school: '',
      price1: '',
      price2: '',
      search: '',
      colors: ['orange', 'green', 'cyan', 'blue', 'gray'],
      items: [
        { type: '', label: '待解决' },
        { type: 'info', label: '已关闭' },
        { type: 'success', label: '解决中' },
        { type: 'warning', label: '已完成' },
        { type: 'danger', label: '南昌大学' }
      ],
      dialogTableVisible: false,
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {value: '中山大学'},
        {value: '广州大学'},
        {value: '清华大学'}
      ]
    },
    handleSelect(item) {
      console.log(item);
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.box {
  width: 100%;
  padding: 30px;
}

.layui-badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: pink;
  margin: 2px;
}

.bg-orange {
  background-color: #FFB900;
}

.bg-green {
  background-color: #009688;
}

.bg-cyan {
  background-color: #03A9F4;
}

.bg-blue {
  background-color: #2196F3;
}

.bg-gray {
  background-color: #9E9E9E;
}

fieldset:not(.message){
  padding-left: 20px;
  border: 0;
  border-top: 1px solid #DCDFE6;
  margin: 10px 50px;
  font-size: 20px;
}


fieldset legend{
  padding: 0 10px;
}


.main-row {
  margin: 10px auto;
  width: 75%;
}

.right-col {
  margin-left: 35px;
}

.input-col {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}

::v-deep .el-autocomplete .el-popper {
  width: auto !important;
}

.price-range {
  display: flex;
  align-items: center;
}

.range-separator {
  text-align: center;
  padding: 0 5px;
  line-height: 35px;
}

.search-area {
  display: flex;
  align-items: center;
}

.search-input {
  width: 520px;
}

::v-deep .search-input .el-input__inner {
  width: 200px;
}

.custom-select {
  width: 45%;
}

::v-deep .el-select__prefix-inner {
  color: #666;
  font-size: 14px;
  left: 10px;
}

.price-input {
  width: 165.8px;
  margin-right: 5px;
}

.price-input.secondary {
  width: 45px;
}


::v-deep .el-input-group__prepend {
  background: #fff;
  padding: 0 10px;
  width: 80px;
  text-align: center;
  border-radius: 0 !important;
  color: #000;
}

::v-deep .el-input__inner {
  height: 35px !important;
  line-height: 35px !important;
  padding: 0 10px;
  border-radius: 0 !important;
}

.search-button {
  height: 35px;
  padding: 0 20px !important;
  margin-left: 10px;
  background: #16BAAA;
  color: #fff;
}
.card{
  margin:  10px 30px;
}
.content{
  margin-left: -20px;
  margin-top: 5px;
  height: 18px;
  line-height: 18px;
  font-size: 14px;
}
.content span{
  padding: 0 10px 0 0;
  font-size: 14px;
  color: #606266;
}
.content h3{
  color: #000000D9;
  font-weight: 700;
  display: block;
  font-size: 1.17em;
  margin: 10px auto;
}
.message{
  margin-left: -20px;
  padding-left: 20px;
  border: 1px solid #DCDFE6;
  font-size: 20px;
}

</style>